<template>
	<div class="deviceInformation-page">
		<div class="deviceInformation-page-search">
			<el-input class="search-input" placeholder="请输入名称" v-model="searchData.equipmentName"></el-input>
			<el-input class="search-input ml-10" placeholder="请输入编号" v-model="searchData.equipmentNumber"></el-input>
			<el-input class="search-input ml-10" placeholder="请输入型号" v-model="searchData.equipmentSize"></el-input>
			<el-date-picker
                v-model="searchData.equipmentCreatTime"
				type="date"
				:editable="false"
				format="yyyy 年 MM 月 dd 日"
				value-format="yyyy-MM-dd"
				class="search-input ml-10"
				placeholder="请选择生产日期"></el-date-picker>
			<el-input class="search-input ml-10" placeholder="请输入生产批号" v-model="searchData.productId"></el-input>
			<el-input class="search-input ml-10" placeholder="请输入制造商" v-model="searchData.productPeople"></el-input>
			<el-select clearable filterable class="search-input ml-10" placeholder="请选择设备状态" v-model="searchData.state">
				<el-option label="空闲" value="空闲"></el-option>
				<el-option label="使用中" value="使用中"></el-option>
				<el-option label="故障" value="故障"></el-option>
			</el-select>
			<SearchOrReset @getTableData="getTableData" @reset="restSearch"></SearchOrReset>
		</div>
		<div class="deviceInformation-page-funcBtns mt-10">
			<el-button type="primary">新建</el-button>
		</div>
		<div class="deviceInformation-page-table mt-10">
			<PublicTable :table-data="tableData" :table-header="columnObj">
				<template #controls="{ row, index }">
					<EditOrDel></EditOrDel>
				</template>
			</PublicTable>
		</div>
        <div class="deviceInformation-page-paging mt-10">
			<el-pagination
				:page-sizes="[5, 10, 15, 20]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="pageNum"
				:page-size="pageSize"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import EditOrDel from "../../components/Buttons/EditOrDel.vue";
import SearchOrReset from "../../components/Buttons/SearchOrReset.vue";
import PublicTable from "../../components/Tables/PublicTable.vue";
import { getBaseData } from "../../api/Common";

export default {
	name: "DeviceInformation",
	components: { PublicTable, SearchOrReset, EditOrDel },
	data() {
		return {
			tableData: [],
			columnObj: [],
			searchData: {
                equipmentName:'',
                equipmentNumber:'',
                equipmentSize:'',
                equipmentCreatTime:'',
                productId:'',
                productPeople:'',
                state:''
            },
			total: 0,
			pageSize: 0,
			pageNum: 0,
		};
	},
	created() {
		this.getTableData();
	},
	methods: {
		// 获取表格数据
		getTableData() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
                equipmentName:this.searchData.equipmentName,
                equipmentNumber:this.searchData.equipmentNumber,
                equipmentSize:this.searchData.equipmentSize,
                equipmentCreatTime:this.searchData.equipmentCreatTime,
                productId:this.searchData.productId,
                productPeople:this.searchData.productPeople,
                state:this.searchData.state
			};
			getBaseData("/deviceInformation/search", params)
				.then((res) => {
					console.log("deviceInformation", res);
					this.total = res.data.total;
					this.tableData = res.data.list;
					this.setTableColumn();
				})
				.catch((err) => {
					console.log(err);
				});
		},
		setTableColumn() {
			let tableData = this.tableData.map((item) => {
				return {
					id: item.id,
					equipmentName: item.equipmentName,
					equipmentNumber: item.equipmentNumber,
					equipmentSize: item.equipmentSize,
					equipmentCreatTime: item.equipmentCreatTime,
					productId: item.productId,
					productPeople: item.productPeople,
					state: item.state,
				};
			});
			let columns = tableData[0];
			// console.log('columns',columns);
			const labelValues = [
				"编号",
				"名称",
				"编码",
				"型号",
				"生产日期",
				"生产批号",
				"制造商",
				"设备状态",
			];
			let propArray = Object.keys(columns).map((key, index) => {
				return {
					prop: key,
					label: labelValues[index],
					width: "",
					align: "center",
					text: true,
				};
			});
			propArray[0].width = "50";
			propArray.push({
				prop: "",
				label: "操作",
				width: "",
				align: "center",
				slot: "controls",
			});
			this.columnObj = propArray;
		},
        //重置搜索框
        restSearch(){
            for (let key in this.searchData) {
				if (this.searchData.hasOwnProperty(key)) {
					this.searchData[key] = "";
				}
			}
            this.getTableData()
        },
        handleSizeChange(pageSize){
            this.pageSize = pageSize;
            this.getTableData()
        },
        handleCurrentChange(pageNum){
            this.pageNum = pageNum;
            this.getTableData()
        }
	},
};
</script>

<style lang="scss" scoped>
.deviceInformation-page {
    .deviceInformation-page-search {
        display: flex;
        align-items: center;
        .search-input {
            width: 150px;
        }
    }
    .deviceInformation-page-funcBtns {
    }
    .deviceInformation-page-table {
    }
}
</style>
